<template>
  <view class="padding-sm">
    <view class="patient-info">
      <view>{{ patientInfo.name }}</view>
      <view class="info-item light bg-cyan" :key="index" v-for="(item, index) in diseaseList">{{item}}</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['patientInfo']),
    },
    onLoad() {
      this.fetchData();
    },
    data() {
      return {
        diseaseList: []
      }
    },
    methods: {
      // 获取患者疾病列表
     async fetchData() {
        const {
          data: res
        } = await uni.$http.get('/info/subList');
        this.diseaseList = res.data;
      },
    }
  }
</script>

<style lang="scss">
  .patient-info {
    border-radius: 5px;
    height: 40px;
    background-color: white;
    border: 1px solid skyblue;
    /* 添加蓝色边框，2px 宽度 */
    padding: 10px;
    display: flex;
    align-items: center;

    .info-item {
      padding: 10px;
      border-radius: 5px;
      height: 25px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-left: 20px;
    }
  }
</style>